<template>
	<view class="container">
		<map
			style="width: 100%; height: 100%;"
			:latitude="latitude"
			:longitude="longitude"
			:markers="markers"
			@markertap="onMarkerTap"
		>
		</map>
	</view>
</template>

<script>
export default {
	data() {
		return {
			hall: null,
			latitude: 39.909, // Default latitude
			longitude: 116.39742, // Default longitude
			markers: []
		};
	},
	onLoad(options) {
		if (options.hall) {
			try {
				this.hall = JSON.parse(decodeURIComponent(options.hall));
				console.log('Decoded Hall Info:', this.hall);
				// Assuming hall object has latitude and longitude properties
				if (this.hall && this.hall.latitude && this.hall.longitude) {
					this.latitude = this.hall.latitude;
					this.longitude = this.hall.longitude;
					this.markers = [{
						id: Number(this.hall.id),
						latitude: this.hall.latitude,
						longitude: this.hall.longitude,
						iconPath: '/static/logo.png', // Use a default marker icon or hall image
						width: 30,
						height: 30,
						callout: {
							content: this.hall.name + '\n' + this.hall.address,
							color: '#000000',
							fontSize: 14,
							borderRadius: 5,
							bgColor: '#ffffff',
							padding: 5,
							display: 'ALWAYS'
						}
					}];
				} else {
					console.error('Hall data is missing location info:', this.hall);
					// Handle missing location, maybe show a default location or error
					uni.showToast({ title: '无法获取场馆位置信息', icon: 'none' });
				}
			} catch (e) {
				console.error('Failed to parse hall data:', e);
				uni.showToast({ title: '加载场馆信息失败', icon: 'none' });
			}
		} else {
			console.error('No hall data passed to map page');
			uni.showToast({ title: '未指定场馆', icon: 'none' });
			// Optionally navigate back or show a default map
			// uni.navigateBack();
		}
	},
	methods: {
		onMarkerTap(e) {
			console.log('Marker tapped:', e.markerId);
			// 确保 markerId 是数字类型
			console.log('Marker ID 类型:', typeof e.markerId);
			// You can add interactions here, like showing more details
			// For now, let's try opening the location in the map app
			if (this.hall && this.hall.latitude && this.hall.longitude) {
				uni.openLocation({
					latitude: this.hall.latitude,
					longitude: this.hall.longitude,
					name: this.hall.name,
					address: this.hall.address,
					success: function () {
						console.log('Opened location successfully');
					},
					fail: function (err) {
						console.error('Failed to open location:', err);
						uni.showToast({ title: '打开地图失败', icon: 'none' });
					}
				});
			}
		}
	}
};
</script>

<style>
.container {
	width: 100vw;
	height: 100vh;
}
</style>